// pages/exp/double/result.js
var utils = require('../../../utils/util.js')
import * as echarts from '../../../ec-canvas/echarts';

function initPlot(data, total_hit_rate) {
    var data_aggr = []
    var aggr_value = 0
    var aggr_count = 0
    data.forEach(function (i) {
        aggr_value += i[1]
        aggr_count++
        data_aggr.push([i[0], aggr_value / aggr_count])
    })
    const option = {
        animation: false,
        title: {
            text: '命中率历史数据'
        },
        legend: {
            top: 'bottom', //'8%',
            // right: 'right',
            data: [
                { icon: 'roundRect', name: '实时' },
                { icon: 'roundRect', name: '累计' }
            ]
        },
        xAxis: {
            data: data.map(function (item) {
                return item[0];
            })
        },
        yAxis: {
            splitLine: {
                show: false
            },
            axisLabel: {
                show: true,
                // interval: 'auto',
                formatter: '{value} %'
            },
        },
        // dataZoom: [{
        //     startValue: '2018-06-23'
        // }, {
        //     type: 'inside'
        // }],
        visualMap: {
            show: false,
            pieces: [{
                lte: 25,
                color: '#660099'
            }, {
                gt: 25,
                lte: 35,
                color: '#cc0033'
            }, {
                gt: 35,
                lte: 45,
                color: '#ff9933'
            }, {
                gt: 45,
                lte: 55,
                color: '#ffde33'
            }, {
                gt: 55,
                lte: 65,
                color: '#cc0033'
            }, {
                gt: 65,
                lte: 75,
                color: '#660099'
            }, {
                gt: 75,
                color: '#7e0023'
            }]
        },
        series: [{
            name: '实时',
            type: 'line',
            data: data,
            markLine: {
                silent: true,
                data: [{
                    name: 'Chance',
                    yAxis: 50,
                    symbolSize: 1,
                    symbol: 'none',
                    lineStyle: { color: '#ccc' },
                    label: { show: false, position: 'middle', formatter: '理论命中率' }
                }]
            }
        }, {
            name: '累计',
            type: 'line',
            data: data_aggr,
            z: 20,
            lineStyle: {
                color: '#096'
            },
            markLine: {
                silent: true,
                data: [{
                    yAxis: total_hit_rate,
                    lineStyle: { color: '#030' },
                    label: { position: 'middle', formatter: '累计命中率: {c}%' }
                }]
            }
        }]
    };
    return option;
}

function initChart(that) {
    console.log('init')
    if (that.charts && that.chart_options) {
        console.log('done', that.charts, that.chart_options)
        that.charts.setOption(that.chart_options);
    } else {
        console.log('delay')
        setTimeout(function () {
            initChart(that)
        }, 100)
    }
}

Page({
    charts: false,
    chart_options: false,

    /**
     * 页面的初始数据
     */
    data: {
        total_attend_count: 8,
        total_hit_rate: 50.0004,
        ec: {
            lazyLoad: true // 将 lazyLoad 设为 true 后，需要手动初始化图表
        },
    },



    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        wx.showNavigationBarLoading()
        var that = this;
        utils.httpRequest({
            url: '/PsiPrecognition/resultAll',
            success: function (res) {
                wx.hideNavigationBarLoading()
                var c = res.data
                var timeMin, timeMax
                var data = c.data.map(function (item) {
                    if (timeMin == undefined || timeMin > item[0]) timeMin = item[0];
                    if (timeMax == undefined || timeMax < item[0]) timeMax = item[0];
                    return [item[0], item[1] * 100 / 20]
                })
                var total_hit_rate = (c.total_hit_count * 100 / (c.total_attend_count * 20)).toFixed(6)
                that.setData({
                    // pValueSign: statResult[0][0],
                    // pValue: statResult[0][1],
                    // isSignificant: statResult[0][1] <= 0.05 && statResult[0][0] == '≤',
                    // meanDiff: statResult[2],
                    // df: statResult[1],
                    total_attend_count: c.total_attend_count,
                    total_hit_rate: total_hit_rate,
                    begin_t: timeMin,
                    end_t: timeMax,
                    read_count: c.read_count,
                })
                that.chart_options = initPlot(data, total_hit_rate);
            }
        })
    },

    myExps: function () {
        wx.redirectTo({
            url: '/pages/exp/exp', complete: function (r) { console.log(r) }
        })
    },

    gotoIndex: function () {
        wx.redirectTo({
            url: '/pages/index/index', complete: function (r) { console.log(r) }
        })
    },

    onPullDownRefresh: function () { wx.stopPullDownRefresh() },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {
        return { title: "真有超能力吗？超心理学测试总体结果表明……", imageUrl: '../../../images/third-eye.jpg' }
    },

    onReady: function () {
        // 获取组件
        var ecComponent = this.selectComponent('#mychart-dom-bar');
        var that = this;
        ecComponent.init((canvas, width, height) => {
            // 获取组件的 canvas、width、height 后的回调函数
            // 在这里初始化图表
            // console.log(width, height)
            //   return initChart(canvas, width, height);
            const chart = echarts.init(canvas, null, {
                width: width,
                height: height
            });
            that.charts = chart;
            initChart(that)
            // 注意这里一定要返回 chart 实例，否则会影响事件处理等
            return chart;
        });
    },
})